<template>
	<!-- 统计及监控模块-工作情况汇总（日统计）页面 -->
	<div class="fillcontain">
		<el-form label-width="100px" class="search_container">
			<el-row>
			<el-col :span="5">
				<el-form-item label="业务部门" prop="customerNo">
					<el-select v-model="searchParams.orgid" placeholder="">
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<el-form-item label="选择日期" prop="telephone">
					<el-date-picker  v-model="searchParams.time" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
					 placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<el-form-item label="险种类型" prop="idNo">
					<el-select v-model="searchParams.risk" placeholder="">
						<el-option v-for="item in insmain" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<el-form-item label="渠道选择" prop="customerName">
					<el-select v-model="searchParams.channel" placeholder="">
						<el-option v-for="item in channels" :key="item.key" :label="item.name" :value="item.key">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="4" style="padding-left: 40px;float: right;">
				<el-button type="primary" icon="el-icon-search" @click="search"></el-button>
				<el-button type="primary" plain icon="el-icon-refresh" @click="research"></el-button>
			</el-col>
			</el-row>
		</el-form>
		<div class="contain">
		<!-- 操作按钮 -->
		<el-row class="bgfff pb20" v-if="false">
			<el-col :span="24">
				<el-button @click="addDialogVisible = true" type="danger" plain>导出</el-button>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="6" class="pr15">
				<div class="statis_box prescription">
					<h5 class="statis_tit">时效达成率</h5>
					<div id="my-chart-Pie-prescription"></div>
					<div class='statis_prescription_name pb30'>
						<el-row>
							<el-col :span="12" class="text_right"><span class="textColorGreyA">达成差异率:</span></el-col>
							<el-col :span="12" class="text_left"><span class="textColorRed" id="reachRate">0.0%</span></el-col>
							<el-col :span="12" class="text_right"><span class="textColorGreyA">达成率:</span></el-col>
							<el-col :span="12" class="text_left"><span class="textColorGreyB" id="dayachRate">0.0%</span></el-col>
							<el-col :span="12" class="text_right"><span class="textColorGreyA">当日受理任务数:</span></el-col>
							<el-col :span="12" class="text_left"><span class="textColorGreyB" id="dayAllCount">0</span></el-col>
							<el-col :span="12" class="text_right"><span class="textColorGreyA">当日完成任务数:</span></el-col>
							<el-col :span="12" class="text_left"><span class="textColorGreyB" id="dayEndCount">0</span></el-col>
						</el-row>
					</div>
				</div>
			</el-col>
			<el-col :span="18">
				<el-col :span="24">
					<div class="statis_box number">
						<h5 class="statis_tit">人工核保处理件数</h5>
						<p class="text_right subtext"><i class="el-icon-s-marketing"></i>实际完成件数</p>
						<div id="my-chart-Bar-number"></div>
					</div>
				</el-col>
				<el-col :span="24" class="mt15">
					<div class="statis_box comparison">
						<h5 class="statis_tit">人工工作量情况比对</h5>
						<p class="text_right subtext"><span style="color:#ffff3c ;">— </span>人均工作量 <i style="color:#7bc7c8 ;" class="el-icon-s-data"></i> 实际工作量</p>
						<div id="my-chart-Bar-comparison"></div>
					</div>
				</el-col>
			</el-col>
		</el-row>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		queryCommon
	} from '@/api/statis/newWork/newWork';
	import TaskConstants from '@/api/taskManager/common'
	export default {
		data() {
			return {
				emptySearchParams:{},
				addDialogVisible:false,
				routeid:'',
				searchParams:{
					channel:'',
					risk:'',
					time:'',
					orgid:''
				},
				insmain:TaskConstants.insmain,
				channels:TaskConstants.preChannelType,
			}
		},
		activated(){
		    document.onkeydown = (event)=>{
		        var e = event || window.event || arguments.callee.caller.arguments[0];
		        if (e && e.keyCode == 113) {
		            this.search();
		        }
		    };
		}, 
		created() {
			this.emptySearchParams = JSON.parse(JSON.stringify(this.searchParams));
		},
		mounted() {
			this.queryC();
		},
		methods: {
			search() {
				this.queryC();
			},
			research() {
				this.searchParams = JSON.parse(JSON.stringify(this.emptySearchParams));
			},
			queryC() {
				let param = {
					'routeid': 'hebao',
					'time': this.searchParams.time,
					'type': 'day',
					'channel':this.searchParams.channel,
					'risk':this.searchParams.risk
				};
				let vueObj = this;
				queryCommon(vueObj, param, "时");
			}

		},
		computed: {
			...mapGetters(['tags']),
		},
	}
</script>

<style lang="less" scoped>
	.contain {
		background: #fff;
		padding: 30px 10px 20px 10px;
		// margin-bottom: 20px;
		.statis_box {
			box-shadow: 0 0 10px #e1e1e1;
			border: 1px solid #e1e1e1;
		
			.statis_tit {
				padding: 10px 20px;
				color: #666;
			}
		
			.el-icon-s-marketing {
				color: #f76767;
				padding-right: 10px;
		
			}
		}
		
		.statis_prescription_name {
			span {
				padding: 10px;
				display: block;
			}
		
			span.textColorGreyA {
				color: #999;
			}
		
			span.textColorGreyB {
				color: #666;
			}
		
			span.textColorRed {
				color: #f76767;
			}
		}
		
		.number p.subtext {
			padding: 0 20px;
			color: #666;
		}
		
		#my-chart-Pie-prescription {
			width: 300px;
			padding-bottom: 20px;
			min-height: 280px;
		}
		
		#my-chart-Bar-number {
			width: 950px;
			padding-bottom: 20px;
			min-height: 280px;
		}
		
		#my-chart-Bar-comparison {
			width: 950px;
			padding-bottom: 20px;
			min-height: 280px;
		}
	}

	.fillcontain {
		padding-bottom: 0;
	}

	// .search_container {
	// 	padding: 20px 20px 0 20px;
	// 	//    border-top: 1px solid #e1e1e1;
	// }
</style>
